<template>
  <div class="login-form">
    <h2>用户登录</h2>
    <div class="form-item">
      <label>用户名：</label>
      <input type="text" v-model="username" placeholder="请输入用户名">
    </div>
    <div class="form-item">
      <label>密码：</label>
      <input type="password" v-model="password" placeholder="请输入密码">
    </div>
    <button @click="handleLogin">登录</button>
    <p @click="$router.push('/register')" class="link">去注册 →</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request'; // 导入封装的 Axios

const username = ref(''); // 绑定用户名输入框
const password = ref(''); // 绑定密码输入框
const router = useRouter(); // 初始化路由跳转工具

// 登录逻辑：调用后端 /user/login 接口
const handleLogin = async () => {
  const result = await request.post('/login', {
    username: username.value,
    password: password.value
  });
  alert(result); // 显示后端返回的提示（如“登录成功”）
  // 登录成功后跳转到用户信息页，并携带用户名参数
  router.push(`/info?username=${username.value}`);
};
</script>

<style scoped lang="less">
.login-form {
  width: 300px;
  margin: 80px auto;
  padding: 20px;
  border: 1px solid #eee;
  .form-item { margin: 15px 0; }
  input { width: 180px; padding: 8px; margin-left: 10px; }
  button { width: 100%; padding: 10px; background: #42b983; color: #fff; border: none; cursor: pointer; }
  .link { color: #42b983; text-align: center; margin-top: 15px; cursor: pointer; }
}
</style>